<template>
  <div style="width: 100%">
    <iframe ref='box' :load="onLoad" style="width: 100%; border: none" :title="flowDiagram" :src="flowChartUrl"></iframe>
  </div>
</template>

<script>
export default {
  name: 'flow-chart',
  props: {
    flowInfo: Object,
  },
  data() {
    return {
      flowDiagram: '流程图',
      flowChartUrl: ''
    }
  },
  methods: {
    onLoad () {
      const iframe = this.$refs.box
      const canvas = iframe.contentWindow.document.getElementsByClassName('canvas')
      if (!canvas || canvas.length === 0) {
        console.warn('no canvas element found')
        return
      }

      canvas[0].style.minWidth = '99%'
    }
  },
  created() {
    const url = "/sys/emapflow/modules/tasks/flowDiagram.html?processInstanceId="+this.flowInfo.processInstanceId+"&taskId="+this.flowInfo.taskId+"&defKey="+this.flowInfo.defKey+"&appName="+this.flowInfo.appName+"&language="+this.flowInfo.language
    this.flowChartUrl = window.contextPath + url
  },
  mounted () {
    const iframe = this.$refs.box
    // 处理兼容行问题
    iframe.onload = this.onLoad.bind(this)
  },
  beforeDestroy () {
    const iframe = this.$refs.box
    iframe.onload = null
  }
}
</script>
